/* 这是个css注释， css的语法为selector {key:value; key2:value2;...keyn:valuen} */
#para1 {
  text-align: center;
  color: red;
}

.center {
  text-align: center;
  color: red;
}

li.create-css {
  font-size: 20;
  color: red;
}

body {
  /* background:#ffffff url('https://www.runoob.com/try/demo_source/img_tree.png') no-repeat right top;*/
  background-color:#ffffff;
  background-image: url('https://www.runoob.com/try/demo_source/img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;

  font-size: 100%;
}

.text-color {color:red;}
h1.text-color {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

h1.text-align{text-align: center}
.text-align.date{text-align:right;}
.text-align.main{text-align:justify;}

a.no-dec{text-decoration: none}

.text-overline {
  text-decoration: overline;
}
.text-line-through {
  text-decoration: line-through;
}
.underline {
  text-decoration: underline;
}

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

.indent {
  text-indent: 50px;
}

p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

h1.font-size-px {
  font-size: 40px;
}

h2.font-size-px {
  font-size: 30px;
}

p.font-size-px {
  font-size: 20px;
}


h1.font-size-em {
  font-size: 2.5em;
}

h2.font-size-em {
  font-size: 1.875em;
}

p.font-size-em {
  font-size: 1.25em;
}

a.link:link {color:#000000;}      /* 未访问链接*/
a.link:visited {color:#00FF00;}  /* 已访问链接 */
a.link:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a.link:active {color:#0000FF;}  /* 鼠标点击时 */

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

/* 表格边框 表格有双边框。这是因为表和th/ td元素有独立的边界*/
table, th, td {
    border: 1px solid black;
}
/*折叠边框*/
table
{
    border-collapse:collapse;
}

table 
{
    width:100%;
}
th
{
    height:50px;
}

td
{
    padding:15px;
    text-align:right;
}

div.box-model {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}

p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}

p.multi
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
  border-color:red;
}

/* 分组选择器 */
h1,h2,p
{
    color:green;
}
/* 嵌套选择器 */
p
{
	color:blue;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
p.marked{
    text-decoration:underline;
}

h1.hidden {visibility:hidden;}

h2.hidden {
  display:none;
}

li.inline {
  display: inline;
}

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}

.thumbnail {
  float:left;
	width:110px;
	height:90px;
	margin:5px;
  clear: both;
}
/*后代选择器(以空格分隔)*/
div p
{
	background-color:yellow;
}
/*子元素选择器(以大于号分隔）*/
div>p
{
	background-color:yellow;
}
/*伪类*/
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

/*伪元素*/
p.pseudo:first-line 
{
  color:#ff0000;
  font-variant:small-caps;
}